<!-- 管理后台登录页面 - 提供管理员身份验证功能 -->
<template>
  <!-- 登录页面主容器，使用背景图片 -->
  <div class="admin-login">
    <!-- 登录表单容器 -->
    <div class="login-container">
      <!-- 登录卡片，包含表单和样式 -->
      <div class="login-card">
        <!-- 登录页面头部，显示标题和副标题 -->
        <div class="login-header">
          <h1 class="login-title">管理后台</h1>
          <p class="login-subtitle">请登录以访问管理功能</p>
        </div>

        <!-- 示例数据提示 -->
        <div v-if="isUsingSampleData" class="sample-data-notice">
          <el-alert
            title="示例数据模式"
            description="当前使用示例数据登录。示例账号：admin，密码：admin123"
            type="info"
            :closable="false"
            show-icon>
          </el-alert>
        </div>

        <!-- 登录表单，使用Element Plus表单组件 -->
        <el-form ref="loginFormRef" :model="loginForm" :rules="loginRules" class="login-form"
          @submit.prevent="handleLogin">
          <!-- 用户名输入框 -->
          <el-form-item prop="username">
            <el-input v-model="loginForm.username" placeholder="用户名" size="large" prefix-icon="User" clearable />
          </el-form-item>

          <!-- 密码输入框，支持密码显示/隐藏 -->
          <el-form-item prop="password">
            <el-input v-model="loginForm.password" type="password" placeholder="密码" size="large" prefix-icon="Lock"
              show-password clearable />
          </el-form-item>

          <!-- 记住我复选框 -->
          <el-form-item>
            <el-checkbox v-model="loginForm.rememberMe">
              记住我
            </el-checkbox>
          </el-form-item>

          <!-- 登录按钮，支持加载状态 -->
          <el-form-item>
            <el-button type="primary" size="large" class="login-button" :loading="loading" @click="handleLogin">
              {{ loading ? '登录中...' : '登录' }}
            </el-button>
          </el-form-item>
        </el-form>

        <!-- 登录页面底部，提供返回首页链接 -->
        <div class="login-footer">
          <p class="back-to-home">
            <router-link to="/">返回首页</router-link>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// 导入Vue 3 Composition API核心功能
import { ref, reactive } from 'vue'
// 导入Vue Router用于页面导航
import { useRouter } from 'vue-router'
// 导入Element Plus组件和类型
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
// 导入Element Plus图标组件
import { User, Lock } from '@element-plus/icons-vue'
// 导入认证工具函数
import { adminLogin } from '@/utils/auth'
// 导入API工具和常量
import { post, API_PATHS } from '@/utils/api'

// 获取路由实例，用于页面跳转
const router = useRouter()
// 表单引用，用于表单验证
const loginFormRef = ref<FormInstance>()
// 登录按钮加载状态
const loading = ref(false)
// 是否正在使用示例数据
const isUsingSampleData = ref(false)

// 登录表单数据，使用reactive确保响应式
const loginForm = reactive({
  username: '', // 用户名
  password: '', // 密码
  rememberMe: false // 记住我选项
})

// 表单验证规则配置
const loginRules: FormRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '用户名长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在 6 到 20 个字符', trigger: 'blur' }
  ]
}

// 类型定义
interface AdminLoginRequest {
  username: string
  password: string
  rememberMe?: boolean
}

interface AdminLoginData {
  token: string
  user: {
    id: number
    username: string
    role: string
    permissions: string[]
  }
  expiresIn: number
}

// 示例数据
const sampleAdminData: AdminLoginData = {
  token: 'sample-admin-token-12345',
  user: {
    id: 1,
    username: 'admin',
    role: 'admin',
    permissions: ['dashboard', 'posts', 'categories', 'tags', 'comments', 'users', 'settings']
  },
  expiresIn: 7200
}

/**
 * 使用示例数据登录
 * @description 当API请求失败时使用示例数据进行登录
 */
const useSampleData = () => {
  isUsingSampleData.value = true
  ElMessage.warning('后端服务暂时不可用，使用示例数据登录')
}

/**
 * 处理登录逻辑
 * 验证表单数据，执行登录请求，处理登录结果
 */
const handleLogin = async () => {
  // 检查表单引用是否存在
  if (!loginFormRef.value) return

  try {
    // 验证表单数据
    await loginFormRef.value.validate()
    // 设置加载状态
    loading.value = true
    // 重置示例数据标识
    isUsingSampleData.value = false

    // 准备登录数据
    const loginData: AdminLoginRequest = {
      username: loginForm.username.trim(),
      password: loginForm.password,
      rememberMe: loginForm.rememberMe
    }

    // 调用后端API进行管理员登录
    const response = await post<AdminLoginData>(API_PATHS.AUTH.ADMIN_LOGIN, loginData, {
      timeout: 8000,
      retry: 2
    })

    if (response.success && response.data) {
      // 登录成功，保存用户信息和token
      const { token, user } = response.data
      
      // 调用认证工具保存登录状态
      adminLogin(user, token)

      // 如果选择记住我，保存到本地存储
      if (loginForm.rememberMe) {
        localStorage.setItem('adminRememberMe', 'true')
      }

      // 显示成功消息
      ElMessage.success('登录成功，正在跳转到管理后台...')
      console.log('管理员登录成功:', response.data)

      // 确保登录状态已保存
      await new Promise(resolve => setTimeout(resolve, 500))

      // 跳转到管理后台
      window.location.href = '/admin/dashboard'
    } else {
      // API返回错误，尝试使用示例数据
      console.error('管理员登录失败:', response.error)
      useSampleData()
      
      // 检查是否是示例数据中的管理员账号
      if (loginForm.username === 'admin' && loginForm.password === 'admin123') {
        // 使用示例数据登录
        adminLogin(sampleAdminData.user, sampleAdminData.token)
        
        if (loginForm.rememberMe) {
          localStorage.setItem('adminRememberMe', 'true')
        }
        
        ElMessage.success('示例数据登录成功，正在跳转到管理后台...')
        console.log('示例数据管理员登录成功:', sampleAdminData)
        
        await new Promise(resolve => setTimeout(resolve, 500))
        window.location.href = '/admin/dashboard'
      } else {
        ElMessage.error('用户名或密码错误')
      }
    }
  } catch (error) {
    // 网络错误或其他异常，尝试使用示例数据
    console.error('管理员登录异常:', error)
    useSampleData()
    
    // 检查是否是示例数据中的管理员账号
    if (loginForm.username === 'admin' && loginForm.password === 'admin123') {
      // 使用示例数据登录
      adminLogin(sampleAdminData.user, sampleAdminData.token)
      
      if (loginForm.rememberMe) {
        localStorage.setItem('adminRememberMe', 'true')
      }
      
      ElMessage.success('示例数据登录成功，正在跳转到管理后台...')
      console.log('示例数据管理员登录成功:', sampleAdminData)
      
      await new Promise(resolve => setTimeout(resolve, 500))
      window.location.href = '/admin/dashboard'
    } else {
      ElMessage.error('网络连接失败，请检查网络后重试')
    }
    
    // 开发环境下输出详细错误信息
    if (import.meta.env.DEV) {
      console.error('详细错误信息:', error)
    }
  } finally {
    // 无论成功失败都要重置加载状态
    loading.value = false
  }
}
</script>

<style scoped lang="scss">
// 导入管理后台登录页面样式
@use '../../assets/styles/admin/_admin-login';
</style>